<template>
    <div class="contentBox">
        <!-- banner -->
        <div class="imgSwiperWrap">
            <swiper class="imgSwiper"
                    auto
                    loop
                    :interval=5000
                    :show-dots="false">
                <swiper-item class="swiper-demo-img"
                             v-for="(item, index) in imgList"
                             :key="index">
                    <img class="swiperImg"
                         :src="item.imgUrl">
                </swiper-item>
            </swiper>
            <div class="broadMarqueeWrap">
                <marquee class="broadMarquee"
                         direction="up"
                         :interval=3000>
                    <marquee-item v-for="(item,index) in broadcastList"
                                  :key="index">
                        <div class="broadcastMsg">{{item.Title}}</div>
                        <!-- <button class="moreBtn"
                                @click="$router.push('/inform')">更多</button> -->
                    </marquee-item>
                </marquee>
                <p v-if="broadcastList.length == 0">暂无通知公告...</p>
                <router-link to="/inform"
                             v-if="broadcastList.length == 0">更多</router-link>
                <div class="backBench"></div>
            </div>
        </div>
        <!-- 单位名称 -->
        <div class="unitSection clear"
             v-show="registerInfo.departName">
            <div class="unitSection_l fl">
                <p class="unitSectionName">单位:{{registerInfo.departName|unescape}}
                </p>
            </div>
            <!-- <router-link to="/addCompany/modify"
                         class="unitSection_r fr"
                         v-if="Administrator==1">
            </router-link> -->
        </div>
        <div class="unitSection clear"
             v-show="!registerInfo.departName">
            <router-link to="/addCompany"
                         class="add_company fl">
                <p class="unitSectionName">新增单位</p>
            </router-link>
            <router-link to="/joinCompany"
                         class="add_company fr">
                <p class="unitSectionName">加入单位</p>
            </router-link>
        </div>

        <!-- 待办事项 -->
        <div class="backlog">
            <header class="backlogHead clear">
                <h4 class="backlogHead_l fl">待办事项</h4>
                <div v-if="homeTodoList2.length>3"
                     class="backlogHead_r fr"
                     @click="handleToggle">{{moreMsg}}</div>
            </header>
            <div class="backlogWrap"
                 v-if="isShow">
                <div class="backlogContent">
                    <div class="backlogList">
                        <div class="backlogItem"
                             v-if="item.Num"
                             v-for="(item,index) in homeTodoList2.slice(0,3)"
                             :key="index"
                             :class="{'unclickable':isUnClickable}"
                             @click="dbhandle(item,index)">
                            <div class="backlogNum">{{item.Num}}</div>
                            <p class="backlogTit">{{item.Name}}</p>
                        </div>
                    </div>
                </div>
                <div class="backlogContent"
                     v-show="istoggleDown">
                    <ul class="backlogList">
                        <li class="backlogItem"
                            v-for="(item,index) in homeTodoList2.slice(3)"
                            :key="index"
                            :class="{'unclickable':isUnClickable}"
                            @click="dbhandle(item,index)">
                            <div class="backlogNum">{{item.Num}}</div>
                            <p class="backlogTit">{{item.Name}}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <p v-else
               class="nothings">暂无待办事项</p>
        </div>

        <!-- 安全指标 -->
        <div class="indicant">
            <div class="indicantList">
                <header class="newHeader">
                    <div class="mycode">安全指标</div>
                </header>
                <div class="indicantContent itemT itemTnew">
                    <!-- <div class="newlist"
                         v-for="(item,index) in homeIndicateList"
                         :key="index"
                         @click="zbhandle(item,index)">
                        <div class="Itop">
                            <img :src="item.ImgUrl" />
                            <div v-if="item.Num"
                                 class="number-show">{{item.Num}}</div>
                        </div>
                        <p class="Ibottom">
                            {{item.Name}}
                        </p>
                    </div> -->
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="../assets/3-4.png" />
                        </div>
                        <p class="Ibottom">
                            不受控重大危险源
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="@static/images/index/icon5.png" />
                            <div class="number-show">23</div>
                        </div>
                        <p class="Ibottom">
                            重大隐患数量
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="@static/images/index/icon6.png" />
                        </div>
                        <p class="Ibottom">
                            逾期未整改隐患
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="@static/images/index/icon7.png" />
                        </div>
                        <p class="Ibottom">
                            安全检查次数
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="../assets/3-4.png" />
                        </div>
                        <p class="Ibottom">
                            不受控重大危险源
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="@static/images/index/icon5.png" />
                        </div>
                        <p class="Ibottom">
                            重大隐患数量
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="alertShow">
                        <div class="Itop">
                            <img src="@static/images/index/icon6.png" />
                        </div>
                        <p class="Ibottom">
                            逾期未整改隐患
                        </p>
                    </div>
                    <div class="newlist unclickable"
                         @click="showPositionValue2=true">
                        <div class="Itop">
                            <img src="@static/images/index/more2.png" />
                        </div>
                        <p class="Ibottom moreMsg">
                            更多
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <toast v-model="showPositionValue"
               type="text"
               :time="1200"
               width="200px"
               is-show-mask
               :text="('请联系客服:客服电话：400-027-0009，客服Q Q：1720876917')"
               :position="tosPosition"></toast>
        <router-link class="epidemicFKEntery"
                     to="/epidemicFKEntery"
                     v-if="registerInfo.departName"></router-link>
        <div class="epidemicFKEntery"
             v-else
             @click="$vux.toast.text('请新增单位或加入单位')">
        </div>
    </div>
</template>

<script>
import { InlineLoading } from 'vux'
export default {
    components: {
        InlineLoading
    },
    data () {
        return {
            registerInfo: {}, // 用户信息
            departsir: '', // 用户类型
            isShow: false, // 是否显示更多代办事项
            istoggleDown: false, // 代办事项是否下拉显示更多
            moreMsg: '更多', // 代办事项toggle显示信息
            dotShow: false, // 是否显示轮播提示点
            isUnClickable: false, // 是否可点击跳转
            tosPosition: 'center',
            homeList: {},
            imgList: [
                {
                    imgUrl: './static/images/index/banner.jpg'
                },
                {
                    imgUrl: './static/images/index/banner.png'
                }
            ],
            showPositionValue: false,
            broadcastList: [
                {
                    'Title': '免费使用疫情防控系统'
                }
            ],
            homeTodoList: [], // 代办事项列表
            homeTodoList2: [], // 可显示的代办事项
            homeWarnList: [], // 安全预警列表
            homeIndicateList: [], // 安全指标列表
            Administrator: 0 // 是否是管理员
        }
    },
    created () {
        this.registerInfo = JSON.parse(localStorage.getItem('registerInfo'))
        this.Administrator = localStorage.getItem('Administrator')
    },
    methods: {
        // 公告点击更多
        // showMore () {
        //     this.$vux.toast.text('该模块暂未开通 ！')
        // }
        alertShow () {
            this.$vux.alert.show({
                title: '如需开通请联系客服',
                content: '客服电话：400-027-0009，客服Q Q：1720876917',
                onShow () {
                    console.log('Plugin: I\'m showing')
                },
                onHide () {
                    console.log('Plugin: I\'m hiding')
                }
            })
        }
    }
}
</script>
<style scoped>
.epidemicFKEntery {
    position: fixed;
    right: 0;
    top: 225px;
    width: 100px;
    height: 65px;
    background: url(../assets/epidemicFKEntery.gif) no-repeat center;
    background-size: 100px 65px;
}
.loadingBox .loading_section {
    height: 300px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.contentBox {
    min-height: 100%;
    /* height: 100%; */
    background: #ebeef2;
    padding-bottom: 60px;
}

/* 轮播图 */
.vux-swiper img {
    width: 100%;
}

.imgSwiperWrap {
    position: relative;
}

.imgSwiper {
    height: 160px;
}

/* 公告轮播 */
.broadMarqueeWrap {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.contentBox .broadMarquee {
    height: 35px !important;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.broadMarquee .broadcastMsg {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    float: left;
}

.broadMarqueeWrap .moreBtn {
    display: block;
    /* position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px; */
    float: right;
    margin-right: 10px;
    /* margin-top: 8px; */
    width: 49px;
    height: 20px;
    font-size: 10px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 17px;
}
.broadMarqueeWrap p {
    position: absolute;
    top: 0;
    left: 10px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #fff;
    z-index: 4;
}
.broadMarqueeWrap a {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 49px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 17px;
    z-index: 2;
    text-align: center;
}
.vux-marquee-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    line-height: 35px;
    padding-left: 45px;
    color: #fff;
    background: url('/static/images/index/broadcast.png') no-repeat 20px center;
    background-size: 13.5px 12px;
}

.contentBox .backBench {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    /* background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);  */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* 单位名称 */
.unitSection {
    height: 70px;
    line-height: 50px;
    font-size: 12px;
    background: #2269ff;
    padding: 0 13px 0 21px;
}

.unitSection_l {
    padding-left: 26px;
    background: url('../assets/unit.png') no-repeat 0 center;
    background-size: 20px 18px;
}
.add_company {
    padding-left: 26px;
    background: url('../assets/icon_add.png') no-repeat 0 center;
    background-size: 18px 18px;
}
.unitSectionName {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.unitSectionName span {
    color: #fff;
}

.unitSection_r {
    width: 22px;
    height: 22px;
    background: url('../assets/icon_compile.png') no-repeat right center;
    background-size: 22px 22px;
    margin-top: 12px;
}

.unitSection_r span {
    color: #fff;
}

/* 代办事项 */
.nothings {
    font-size: 13px;
    text-align: center;
}
.backlog {
    position: relative;
    top: -20px;
    background: #fff;
    border-radius: 18px;
    padding: 0 20px 30px 20px;
}

.backlogHead {
    height: 42px;
    line-height: 42px;
}

.backlogHead_l {
    font-size: 15px;
    font-weight: bold;
}

.backlogHead_r {
    padding-right: 16px;
    font-size: 12.5px;
    color: #999;
    background: url('/static/images/index/more.png') no-repeat right center;
    background-size: 10px 10px;
}
.backlogWrap {
    margin-left: 15px;
}
.backlogContent {
    width: 100%;
    padding-top: 12px;
}

.backlogList {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    flex-wrap: wrap;
}

.backlogItem {
    width: 75px;
    margin-top: 16px;
    margin-right: 40px;
    text-align: center;
}
.backlogItem:nth-of-type(3n + 3) {
    margin-right: 0;
}

.backlogNum {
    color: #2269ff;
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
}

.backlogTit {
    font-size: 12px;
    line-height: 27px;
}

/* 安全预警 */
.forewarning {
    background-color: #fff;
    border-radius: 17px;
    padding: 14px 17px 10px;
    margin-bottom: 20px;
}
.forewarning .newHeader {
    display: flex;
    justify-content: space-between;
    width: 100;
}
.forewarning .mycode {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
}
.forewarning .editMsg {
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #2269ff;
    color: #2269ff;
    border-radius: 10px;
}
.forewarnContent .warnSwiperItem {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.forewarnContent .warnSwiper .newlist {
    width: 60px;
    margin-top: 16px;
    margin-right: 32px;
}
.forewarnContent .warnSwiper .newlist:nth-of-type(4n + 4) {
    margin-right: 0;
}
.forewarnContent .warnSwiperItem:last-child .newlist:last-child p {
    color: #999;
}

/* 安全指标 */
.indicantContent {
    min-height: 100px;
}
.indicant {
    background-color: #fff;
    border-radius: 17px;
    padding: 14px 17px 14px;
    margin-bottom: 20px;
}
.indicantList {
    /* padding-bottom: 20px; */
}
.indicant .newHeader {
    display: flex;
    justify-content: space-between;
    width: 100;
}
.indicant .mycode {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
}
.indicant .editMsg {
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #2269ff;
    color: #2269ff;
    border-radius: 10px;
}
.indicant .itemT {
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
}
.itemT .newlist {
    width: 68px;
    margin-top: 16px;
}
.newlist .Itop {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    position: relative;
}
.newlist .number-show {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ff0000;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 15px;
}
.newlist img {
    width: 100%;
    height: 100%;
}
.Ibottom {
    font-size: 12px;
    text-align: center;
    line-height: 14px;
    margin-top: 7px;
}
.itemTnew {
    flex-wrap: wrap;
}
.itemTnew .newlist {
    margin-right: 22px;
}
.itemTnew .newlist:nth-child(4n + 4) {
    margin-right: 0;
}
.indicant .newlist:last-child .Ibottom {
    color: #999;
}
.unclickable .Ibottom,
.unclickable .backlogTit {
    color: #ccc;
}
</style>
<style>
.weui-loading_toast .weui-toast__content {
    color: #fff;
    font-size: 14px;
}
.weui-toast_text .weui-toast__content {
    color: #fff;
    font-size: 14px;
}
.weui-loading_toast .weui-toast {
    width: 100px;
    min-height: 40px;
    height: 100px;
    top: 280px;
    background: rgba(17, 17, 17, 0.65);
}
.warnSwiper .vux-icon-dot {
    width: 15px !important;
    height: 3px !important;
}
.warnSwiper .vux-icon-dot.active {
    background: #2269ff !important;
}
.forewarnContent .vux-slider .vux-indicator-right,
.forewarnContent .vux-slider > .vux-indicator {
    right: 50%;
    margin-right: -19px;
}
.swiperImg {
    height: 100%;
    object-fit: fill;
}
</style>
